<template>
    <div class="kxy-container">
        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
            <el-form-item>
                <el-input v-model="dataForm.roleName" placeholder="角色名称" clearable @clear="getDataList()"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="getDataList()">查询</el-button>
                <el-button v-if="isAuth('sys:role:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
                <!--<el-button v-if="isAuth('sys:role:delete')" type="danger" @click="deleteHandle()"
                           :disabled="dataListSelections.length <= 0">批量删除</el-button>-->
            </el-form-item>
        </el-form>
        <el-table :data="dataList" border v-loading="dataListLoading"  style="flex: 1" height="100%" >
            <!--@selection-change="selectionChangeHandle"
            <el-table-column
                    type="selection"
                    header-align="center"
                    align="center"
                    width="50">
            </el-table-column>-->
            <el-table-column
                    header-align="center"
                    align="center"
                    width="80"
                    type="index"
                    label="ID">
            </el-table-column>
            <el-table-column
                    prop="roleName"
                    header-align="center"
                    align="center"
                    label="角色名称">
            </el-table-column>
            <!-- <el-table-column
                    prop="remark"
                    header-align="center"
                    align="center"
                    label="备注">
            </el-table-column> -->
            <el-table-column
                    v-if="parseInt(tenantId) === 1"
                    prop="tenantId"
                    header-align="center"
                    align="center"
                    label="所属租户">
            </el-table-column>
            <el-table-column
                    prop="createTime"
                    header-align="center"
                    align="center"
                    label="创建时间">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    header-align="center"
                    align="center"
                    width="150"
                    label="操作">
                <template slot-scope="scope">
                    <el-button v-if="isAuth('sys:role:update')" type="text"
                               @click="addOrUpdateHandle(scope.row.roleId)">修改
                    </el-button>
                    <el-button v-if="isAuth('sys:role:delete')" type="text"
                               @click="deleteHandle(scope.row.roleId)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @size-change="sizeChangeHandle"
                @current-change="currentChangeHandle"
                :current-page="pageIndex"
                :page-sizes="[10, 20, 50]"
                :page-size="pageSize"
                :total="totalPage"
                layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
        <!-- 弹窗, 新增 / 修改 -->
        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    </div>
</template>

<script>
  import AddOrUpdate from './role-add-or-update'

  export default {
    data () {
      return {
        dataForm: {
          roleName: ''
        },
        tenantId: this.$cookie.get('tenantId'),
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        dataListSelections: [],
        addOrUpdateVisible: false
      }
    },
    components: {
      AddOrUpdate
    },
    mounted () {
      this.getDataList()
    },
    methods: {
      // 获取数据列表
      getDataList () {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/sys/role/list'),
          method: 'post',
          data: {
            'userId': this.$cookie.get('userId'),
            'page': this.dataForm.roleName ? '' : this.pageIndex,
            'limit': this.pageSize,
            'roleName': this.dataForm.roleName
          }
        }).then(data => {
          if (data && data.code === 200) {
            this.dataList = data.data.list
            this.totalPage = data.data.totalCount
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      },
      // 多选
      selectionChangeHandle (val) {
        this.dataListSelections = val
      },
      // 新增 / 修改
      addOrUpdateHandle (id) {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(id)
        })
      },
      // 删除
      deleteHandle (id) {
        this.$confirm(`确定要删除吗?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('/sys/role/delete'),
            method: 'post',
            data: {id: id}
          }).then(data => {
            if (data && data.code === 200) {
              this.$notify.success({
                title: '提示',
                message: '操作成功'
              })
              this.getDataList()
            } else {
              this.$notify.warning({
                title: '提示',
                message: data.msg
              })
            }
          })
        }).catch(() => {
        })
      }
    }
  }
</script>
